<template>
	<view class="app-container">
		<!-- 城市选择器 -->
		<cityPicker
			ref="cityPicker"
			:column="2"
			default-value="410100" 
			:mask-close-able="true"
			@confirm="handleCityConfirm"
			@cancel="visible = false"
			:visible="visible"
		/>

		<!-- 固定头部 -->
		<view class="fixed-header">
			<view :style="{ height: statusBarHeight + 'px' }"></view>

			<view class="title-navbar" :style="{ height: navbarHeight + 'px' }">
				<view class="left">
					<uni-icons type="left" :size="20" @tap="uni.navigateBack()"></uni-icons>
				</view>
				<view class="search-container">
					<u-search placeholder="输入搜索的关键词" v-model="searchKey" :showAction="false" height="40"></u-search>
				</view>
				<view class="right"></view>
			</view>

			<view class="nav-tabs">
				<view
					v-for="(item, index) in tabs"
					:key="index"
					:class="['tab-item', currentTab === item.value ? 'active' : '']"
					@click="changeTab(item.value)"
				>
					{{ item.label }}
				</view>
			</view>
		</view>

		<!-- 内容区（带顶部偏移） -->
		<view :style="{ paddingTop: navbarTotalHeight + 45 + 'px' }">
			<view class="content">
				<!-- 当前/历史 -->
				<view class="section current-historical">
					<view class="section-header">
						<text class="section-title">当前/历史</text>
						<view class="clear-btn" @click="clearHistory">
							<uni-icons type="trash" size="16" color="#999"></uni-icons>
							<text class="clear-text">清空</text>
						</view>
					</view>
					<view class="historical-row">
						<view class="current-district">{{ currentCity }}</view>
						<view class="historical-item" v-for="item in historicalList" :key="item">
							{{ item }}
						</view>
					</view>
				</view>

				<!-- 目的地选择 -->
				<view class="section district-selected" @tap="visible = true">
					<view class="section-header">
						<text class="section-title">目的地选择</text>
					</view>
					<view class="destination-row">
						<text class="province-text">{{ currentProvince }}</text>
						<text class="district-text">{{ currentCity }}</text>
					</view>
				</view>

				<!-- 省内热门 -->
				<view class="section hot-section">
					<view class="section-header">
						<text class="section-title">省内热门</text>
					</view>
					<view class="tag-list">
						<view class="tag-item" v-for="city in hotInProvince" :key="city" @click="selectCity(city)">
							{{ city }}
						</view>
					</view>
				</view>

				<!-- 国内热门 -->
				<view class="section hot-section">
					<view class="section-header">
						<text class="section-title">国内热门</text>
					</view>
					<view class="tag-list">
						<view class="tag-item" v-for="city in hotInCountry" :key="city" @click="selectCity(city)">
							{{ city }}
						</view>
					</view>
				</view>

				<!-- 其他热门 -->
				<view class="section hot-section">
					<view class="section-header">
						<text class="section-title">其他热门</text>
					</view>
					<view class="tag-list">
						<view class="tag-item" v-for="item in hotInOther" :key="item" @click="selectCity(item)">
							{{ item }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';

export default {
	components: {
		cityPicker
	},
	data() {
		return {
			statusBarHeight: 0,
			navbarHeight: 0,
			navbarTotalHeight: 0,
			searchKey: '',
			tabs: [
				{ value: 1, label: '国内' },
				{ value: 2, label: '国际/中国港澳台' }
			],
			currentTab: 1,
			// 默认值：河南郑州
			currentProvince: '河南省',
			currentCity: '郑州市',
			historicalList: ['北京', '上海', '杭州'],
			hotInProvince: ['郑州', '开封', '许昌', '洛阳', '安阳'],
			hotInCountry: ['北京', '上海', '厦门', '三亚', '成都', '西安'],
			hotInOther: ['三山五岳', '五湖四海', '沙漠丹霞', '江南水乡'],
			visible: false
		};
	},
	onLoad() {
		this.initNavbarHeight();
	},
	methods: {
		initNavbarHeight() {
			// 假设你有 $navbarUtil 工具，若没有可替换为固定值或 uni.getSystemInfoSync()
			if (this.$navbarUtil) {
				this.statusBarHeight = this.$navbarUtil.getStatusBarHeight();
				this.navbarHeight = this.$navbarUtil.getNavbarHeight();
				this.navbarTotalHeight = this.$navbarUtil.getNavbarTotalHeight();
			} else {
				const sys = uni.getSystemInfoSync();
				this.statusBarHeight = sys.statusBarHeight || 20;
				this.navbarHeight = 44;
				this.navbarTotalHeight = this.statusBarHeight + this.navbarHeight;
			}
		},
		changeTab(val) {
			this.currentTab = val;
		},
		clearHistory() {
			this.historicalList = [];
			uni.showToast({ title: '已清空', icon: 'none' });
		},
		// 点击热门城市
		selectCity(city) {
			this.updateSelectedCity('', city); // 省未知，只更新市
			uni.showToast({ title: `选择了：${city}`, icon: 'none' });
		},
		// 城市选择器确认
		handleCityConfirm(val) {
			this.visible = false;
			
			// piaoyi-cityPicker 返回格式通常是 { province: '河南省', city: '郑州市', ... }
			// 或数组 [province, city]，具体看文档。这里按对象处理
			let province = '';
			let city = '';

			if (Array.isArray(val)) {
				province = val[0] || '';
				city = val[1] || '';
			} else if (typeof val === 'object') {
				province = val.province || val.provinceName || '';
				city = val.city || val.cityName || '';
			} else {
				// 兜底
				city = String(val);
			}

			// 如果省名不含“省”，自动补全（可选）
			if (province && !province.includes('省') && !province.includes('市') && !province.includes('自治区')) {
				province += '省';
			}

			this.updateSelectedCity(province, city);
		},
		// 统一更新选中城市逻辑
		updateSelectedCity(province, city) {
			// 更新当前显示
			if (province) this.currentProvince = province;
			if (city) this.currentCity = city;

			// 更新历史记录（去重 + 最新在前 + 最多10条）
			const list = [...this.historicalList];
			const index = list.indexOf(city);
			if (index > -1) {
				list.splice(index, 1); // 移除旧位置
			}
			list.unshift(city); // 插入到最前
			this.historicalList = list.slice(0, 10); // 最多保留10个
		}
	}
};
</script>

<style scoped lang="scss">
.app-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* 固定头部 */
.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: #ffffff;
}

.title-navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #ffffff;
}

.left {
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.right {
	width: 44px;
}

.search-container {
	height: 40px;
	padding: 0 20rpx;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	gap: 10px;
}

.nav-tabs {
	display: flex;
	height: 45px;

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		padding: 20rpx 0;
		color: #666;
		transition: all 0.2s;
	}

	.tab-item.active {
		color: #0081ff;
		font-weight: 600;
		border-bottom: 6rpx solid #0081ff;
	}
}

/* 内容区 */
.content {
	padding: 20rpx;
}

/* 通用区块 */
.section {
	margin-bottom: 32rpx;
	background-color: #fff;
	padding: 20rpx;
	border-radius: 12rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
}

.clear-btn {
	display: flex;
	align-items: center;
	gap: 8rpx;
	color: #999;
	font-size: 24rpx;
}

/* 当前/历史 - 横向 */
.historical-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	align-items: center;
}

.current-district {
	font-size: 32rpx;
	font-weight: bold;
	color: #ff6700;
	padding: 8rpx 16rpx;
	background: #fff8f0;
	border-radius: 8rpx;
}

.historical-item {
	font-size: 28rpx;
	color: #666;
	padding: 8rpx 16rpx;
	background: #f0f0f0;
	border-radius: 8rpx;
}

/* 目的地选择 - 横向 */
.destination-row {
	display: flex;
	gap: 12rpx;
	align-items: center;
	flex-wrap: wrap;
}

.province-text {
	font-size: 26rpx;
	color: #888;
}

.district-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

/* 热门标签 */
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}

.tag-item {
	padding: 12rpx 24rpx;
	background: #f0f0f0;
	border-radius: 40rpx;
	font-size: 26rpx;
	color: #555;
	transition: all 0.2s ease;
}

.tag-item:active {
	background: #e0e0e0;
	transform: scale(0.98);
}
</style>